<template>
  <ul>
      <li v-for="message in messageList" :key="message.messageId">
        <!-- <a href="/message1">message001</a>&nbsp;&nbsp; -->
        <!--跳转路由并携带query参数，to的字符串写法 -->
        <!-- <router-link :to="`/home/message/detial?messageId=${message.messageId}&messageName=${message.messageName}`">{{message.messageName}}</router-link>&nbsp;&nbsp; -->
        <!--跳转路由并携带query参数，to的对象写法 -->
        <router-link :to="{
            path:'/home/message/detial',
            query:{
                messageId:message.messageId,
                messageName:message.messageName
            }
        }">{{message.messageName}}</router-link>&nbsp;&nbsp;
      </li>
      <router-view></router-view>
  </ul>
</template>

<script>
    export default {
        name:'Message',
        //获取菜单项的配置信息
        data:function(){
            return {
                messageList:[
                    {messageId:'001',messageName:'messageFlow1'},
                    {messageId:'002',messageName:'messageFlow2'},
                    {messageId:'003',messageName:'messageFlow3'},
                ]
            }
        }
    }
</script>

<style>

</style>